
import React, { useState } from 'react';
import { Form, Button, Input, Modal, TreeSelect } from 'antd';
import * as Request from '@/services/Request';
import {
    PlusOutlined,
} from '@ant-design/icons';
import Categories from '@/pages/admin/categories';

const { SHOW_PARENT } = TreeSelect;
const menuFun = (result: []) => {
    var items: any = []
    if (result != null) {
        result.forEach((item: any) => {
            var obj = {
                title: item.categoryName,
                value: item.categoryIndex,
                key: item.id,
                children: menuFun(item.children)
            }
            items.push(obj)
        });
    }
    return items
}
export interface CategoryProps {
    layout: string,
    width?: any,
    cRef?: any,
    name?: any,
    label?: string,
    required?: boolean,
    placeholder?: string,
    multiple: boolean
}
const CategoryComponent: React.FC<CategoryProps> = (props: CategoryProps) => {
    const [dataSource, setDataSource] = useState<any[]>([]);
    const [visible, setVisible] = useState<boolean>(false);
    const [value, setValue] = useState<any[]>([]);
    const switchModal = () => {
        setVisible(!visible)
        refreshData()
    }
    const refreshData = () => {
        Request.get('/api/services/app/Category/GetTreeListAsync?layout=' + props.layout).then((response) => {
            if (response) {
                if (response.success) {
                    var items: any = []
                    var result = response.result
                    items = menuFun(result)
                    setDataSource(items)
                }
            }
        });
    }
    const tProps = {
        treeData: dataSource,
        value,
        onChange: setValue,
        treeCheckable: true,
        showCheckedStrategy: TreeSelect.SHOW_ALL,
        placeholder: '选择菜单权限',
        style: {
            width: props.width,
        },
    };
    React.useEffect(() => {
        Request.get('/api/services/app/Category/GetTreeListAsync?layout=' + props.layout).then((response) => {
            if (response) {
                if (response.success) {
                    var items: any = []
                    var result = response.result
                    items = menuFun(result)
                    setDataSource(items)
                }
            }
        });

    }, [])
    return (
        <>
            <Form.Item label={props.label} style={{ marginBottom: 0 }}>
                <Input.Group compact>
                    <Form.Item name={props.name} rules={[{ required: props.required, message: (props.label ? props.label : props.placeholder) + "必填" }]}>
                        <TreeSelect {...tProps} multiple={props.multiple} />
                    </Form.Item>
                    <Form.Item>
                        <Button icon={<PlusOutlined />} onClick={switchModal} />
                    </Form.Item>
                </Input.Group>
            </Form.Item>
            <Modal
                title={props.layout}
                visible={visible}
                destroyOnClose={true}
                onCancel={switchModal}
                footer={false}
            >
                <Categories layout={props.layout} size="small" />
            </Modal>
        </>
    )
}
export default CategoryComponent;